<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="4">
                <el-input v-model.trim="keyword.name" prefix-icon="fa fa-search" placeholder="查询角色名称"
                          v-permission="'system:role:list'"
                          @keyup.enter.native="initRole"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="fa fa-search" @click="initRole"
                           v-permission="'system:role:list'"> 搜 索
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="fa fa-plus" @click="addRole"
                           v-permission="'system:role:add'"> 添 加 信 息
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="danger" icon="fa fa-trash" @click="handleMultipleDelete"
                           v-permission="'system:role:delete'"> 删
                    除 多 个
                </el-button>
            </el-col>
            <el-col :span="1" style="margin-left: 3px;">
                <el-button type="warning" icon="fa fa-refresh"
                           v-permission="'system:role:list'"
                           @click="initRole">
                </el-button>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="14">
                <div>
                    <el-table width="100%" border :data="page.row" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="50" align="center"></el-table-column>
                        <el-table-column prop="name" label="角色名" align="center"></el-table-column>
                        <el-table-column prop="roleDescription" label="角色描述" align="center">
                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="dark" :content="scope.row.roleDescription"
                                            placement="right">
                                    <span> {{  cutStr(scope.row.roleDescription,8) }}</span>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" align="center">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="scope.row.status"
                                        active-color="#ff4949"
                                        inactive-color="#13ce66"
                                        active-text="禁用"
                                        active-value="1"
                                        inactive-value="0"
                                        @change="changeStatus(scope.row)"
                                        inactive-text="启用"
                                >
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="300">
                            <template slot-scope="scope">
                                <el-button @click="handleDistributePermission(scope.row)" icon="fa fa-pencil"
                                           v-permission="'system:role:update'"> 分 配 权 限
                                </el-button>
                                <el-button @click="handleEdit(scope.row)" icon="fa fa-pencil"
                                           v-permission="'system:role:update'"> 修 改
                                </el-button>
                                <el-button type="danger" @click="handleDelete(scope.row)" icon="fa fa-times-rectangle"
                                           v-permission="'system:role:delete'"> 删 除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--     分 页        -->
                    <el-row v-if="page.total > 10">
                        <el-col :span="22">
                            <el-pagination v-if="page.total > 10"
                                           @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :current-page="pagination.current"
                                           :page-sizes="[9 ,10, 20, 30, 50]"
                                           :page-size="pagination.size"
                                           layout="total, sizes, prev, pager, next"
                                           :total="page.total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <!--    弹出框        -->
            <el-dialog
                    v-dialog-drag
                    :title="isAdd ? '新 增 数 据' : '修 改 数 据'"
                    :visible.sync="centerDialogVisible"
                    width="25%"
                    center
                    @close="resetField"
            >
                <el-form ref="form" :rules="rules" :model="data" label-width="80px">
                    <el-form-item label="角色名:" label-width="80px" prop="name">
                        <el-input v-model="data.name" placeholder="角色名"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述:" label-width="80px" prop="roleDescription">
                        <el-input v-model="data.roleDescription"
                                  placeholder="角色描述信息"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateRole">确 定</el-button>
            </span>
            </el-dialog>
            <!--    分 配 权 限        -->
            <transition
                    appear
                    name="animate__animated animate__bounce animate__faster"
                    enter-active-class="animate__lightSpeedInLeft"
                    leave-active-class="animate__fadeOutRight"
            >
                <el-col :span="8" class="role_permission" v-show="this.roleId !== -1">
                    <h4 class="role_header"><i class="fa fa-pencil"></i>分 配 权 限</h4>
                    <div align="center" style="margin-bottom: 20px">
                        <el-switch
                                v-model="checkStrictly"
                                active-text="单个权限选择"
                                inactive-text="级联选择权限"
                        >
                        </el-switch>
                    </div>
                    <el-tree
                            :check-strictly="checkStrictly"
                            ref="tree"
                            accordion
                            :data="allMenus"
                            show-checkbox
                            node-key="id"
                            :default-checked-keys="roleMenus"
                            :props="defaultProps"
                    >
                    </el-tree>
                    <div class="role_button">
                        <el-button type="primary" @click="saveRoleMenu">保 存</el-button>
                        <el-button @click="resetMenuNode">重 置</el-button>
                    </div>
                </el-col>
            </transition>
        </el-row>
    </div>
</template>

<script>
    import {
        enableRole,
        page,
        deleteMultipleRole,
        deleteRole,
        getRoleMenu,
        updateMenu,
        updateRole,
        addRole
    } from "../../../api/modules/system/role";
    import {menuChildren} from "../../../api/modules/system/menu";
    import {NO_ROLE_SELECTED, refreshPage} from "../../../config/constant/message-Info"
    import cutStr from "../../../utils/cutStr";
    import {addPolicyDocment, updatePolicyDocment} from "../../../api/modules/comprehensive/policy-document";

    export default {
        name: 'SystemRole',

        data() {
            return {
                keyword: {
                    name: ""
                },
                // 用户的角色id
                roleId: -1,
                // tree选择父元素是否自动选择子元素
                checkStrictly: true,
                data: {
                    "id": 0,
                    "name": "",
                    "roleDescription": "",
                    "status": ""
                },
                isAdd: true,
                allMenus: [],
                pagination: {
                    current: 1,
                    size: 10
                },
                roleMenus: [],
                page: {
                    row: [],
                    total: 0
                },
                centerDialogVisible: false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                rules: {
                    name: [{required: true, message: '请输入角色名', trigger: 'blur'}]
                }
            };
        },

        methods: {
            cutStr,
            initRole() {
                page(this.pagination, this.keyword).then(response => {
                    this.page.row = response.row;
                    this.page.total = response.total;
                })
            },
            initMenuChildren() {
                menuChildren().then(response => {
                    this.allMenus = response;
                })
            },
            changeStatus(row) {
                // 是否启用
                enableRole(row);
            },
            addOrUpdateRole() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        // 是新增就进行添加
                        if (this.isAdd) {
                            addRole(this.data).then(() => {
                                // TODO 添加信息 不需要 init
                                this.centerDialogVisible = false;
                                this.initRole();
                            })
                        } else {
                            updateRole(this.data).then(() => {
                                // TODO 修改信息 不需要 init
                                this.centerDialogVisible = false;
                                this.initRole();
                            })
                        }
                    }
                })
            },
            // 当前页大小改变
            handleSizeChange(size) {
                this.pagination.size = size;
                this.initRole();
            },
            // 当前页改变
            handleCurrentChange(current) {
                this.pagination.current = current;
                this.initRole();
            },
            // 修改单个
            handleEdit(row) {
                // 不是添加
                this.isAdd = false;
                Object.assign(this.data, row);
                this.centerDialogVisible = true;
            },
            addRole() {
                // 是添加
                this.isAdd = true;
                Object.assign(this.data, {
                    "id": 0,
                    "name": "",
                    "roleDescription": ""
                });
                this.centerDialogVisible = true;
            },
            // 删除单个
            handleDelete(row) {
                this.$confirm(`此操作将永久删除 <strong><i> ${row.name} </i></strong> 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true,
                    type: 'warning'
                }).then(() => {
                    deleteRole(row.id).then(() => {
                        // 刷新页面
                        this.initRole();
                    });
                });
            },
            // 多选框
            handleSelectionChange(row) {
                // 获取 ids
                this.multipleSelection = row.map(item => item.id);
            },
            // 删除多个
            handleMultipleDelete() {
                // 大于 0 才删除
                if (this.multipleSelection.length > 0) {
                    this.$confirm(`此操作将永久删除<strong> 多条信息</strong>是否继续?`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        dangerouslyUseHTMLString: true,
                        type: 'warning'
                    }).then(() => {
                        deleteMultipleRole(this.multipleSelection).then(() => {
                            // 刷新页面
                            this.initRole();
                        });
                    })
                }
            },
            handleDistributePermission(row) {
                getRoleMenu(row.id).then(response => {
                    this.roleId = row.id;
                    this.$refs.tree.setCheckedKeys(response);
                    // 默认点击才能查看
                    this.checkStrictly = true;
                    // 页面渲染完成之后 可以级联选择
                    this.$nextTick(() => {
                        this.$refs.tree.setCheckedKeys(response);
                        this.checkStrictly = false;
                    })
                })
            },
            // 获取节点
            saveRoleMenu() {
                if (this.roleId !== -1) {
                    // 获取父节点的keys
                    updateMenu(this.roleId, [...this.$refs.tree.getHalfCheckedKeys(), ...this.$refs.tree.getCheckedKeys()]).then(response => {
                        if (response) {
                            this.roleId = -1;
                            this.$notify.success({
                                title: refreshPage,
                                message: refreshPage
                            });
                        }
                    });
                } else {
                    this.$message.warning({message: NO_ROLE_SELECTED})
                }
            },
            // 设置节点为空
            resetMenuNode() {
                this.$refs.tree.setCheckedKeys([]);
            },
            resetField() {
                // 清空表单验证
                this.$refs.form.resetFields();
            }
        },

        mounted() {
            this.initRole();
            this.initMenuChildren();
        },

        computed: {},

        watch: {
            keyword: {
                deep: true,
                handler() {
                    this.pagination.current = 1
                }
            }
        }
    }
</script>

<style scoped>
    .role_permission {
        position: relative;
        height: 500px;
        margin-top: 10px;
        /*background-color: rgb(217, 236, 255);*/
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    .role_header {
        text-align: center;
        letter-spacing: 20px;
    }

    .role_button {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
    }

    .role_button button {
        margin: 0 20px;
    }
</style>